<script setup lang="ts">
import {ref, watch} from 'vue'
// 接收父组件传递的数据
const props = defineProps({
  visible: Boolean,
  data: Object,
  title: String
})

const visible = ref(false)
const top = ref('50px')
const cancelBtn = ref(null)
const closeBtn = ref(null)
const confirmBtn = ref(null)
const header = ref('新增护理项目')

const dialogForm = ref(null)
// 表单绑定对象
const formData = ref({
  id: null,
  image: null,
  name: '',
  nursingRequirement: '',
  orderNo: 1,
  price: 0,
  remark: '',
  status: 1,
  unit: ''
})

// 表单校验规则
const rules = {
  name: [
    {required: true, message: '项目名称必填', type: 'error', trigger: 'blur'},
    {whitespace: true, message: '项目名称不能为空'},
    {min: 1, message: '项目名称在1到10之间', type: 'error', trigger: 'blur'},
    {max: 10, message: '项目名称在1到10之间', type: 'error', trigger: 'blur'}
  ],
  price: [
    {required: true, message: '价格必填', type: 'error'},
    {number: true, message: '请输入数字', type: 'warning'}
  ],
  unit: [
    {required: true, message: '单位必填', type: 'warning', trigger: 'blur'},
    {whitespace: true, message: '单位不能为空'},
    {min: 1, message: '单位在1到5之间', type: 'warning', trigger: 'blur'},
    {max: 5, message: '单位在1到5之间', type: 'warning', trigger: 'blur'}
  ],
  orderNo: [
    {required: true, message: '排序必填', type: 'warning'},
    {number: true, message: '请输入数字', type: 'warning'}
  ],
  image: [{required: true, message: '请先上传护理图片', type: 'warning'}],
  nursingRequirement: [
    {required: true, message: '护理项目描述必填', type: 'warning'},
    {whitespace: true, message: '护理项目描述不能为空'},
    {min: 1, message: '描述在1到50之间', type: 'warning', trigger: 'blur'},
    {max: 50, message: '描述在1到50之间', type: 'warning', trigger: 'blur'}
  ]
}
// 图片上传组件---------------------------
const autoUpload = ref(true)
const showImageFileName = ref(true)
const imageUploadRef = ref()
const files = ref([])
const formatResponse = (response) => {
  if (response.code === 200) {
    formData.value.image = response.data
  }
  return {url: response.data}
}
// 定义事件
const emits = defineEmits(['dialogCloseEmit', 'onFormSubmitEmit'])
// 表单提交, 通知父组件新增数据
const submit = ({validateResult}) => {
  if (validateResult) {
    emits('onFormSubmitEmit', formData.value)
    reset()
  }
}

// 弹窗关闭, 需要将最新状态传递到父组件
const dialogClose = () => {
  reset()
  emits('dialogCloseEmit')
}

const reset = () => {
  dialogForm.value.clearValidate()
  dialogForm.value.reset()
  files.value = []
}

// 监听父组件传递的数据变化
watch(
    () => props.visible,
    () => {
      visible.value = props.visible
    }
)
// 监听父组件传递数据变化
watch(
    () => props.data,
    () => {
      // 将父组件传递的详情数据, 赋值给表单绑定对象
      formData.value = props.data
      console.log(formData.value)
      // 处理图片回显问题
      // if (dialogFormData.value.image) {
      //   uploadFile.value[0] = {url: dialogFormData.value.image}
      // }
    },
    // 深度监听
    {deep: true}
)
</script>


<template>
  <!-- 编辑弹框 -->
  <t-dialog
      v-model:visible="visible"
      :top="top"
      :cancelBtn="cancelBtn"
      :closeBtn="closeBtn"
      :confirmBtn="confirmBtn"
      :header="header"
      :on-close="dialogClose"
  >
    <div class="c_dialog">

      <t-form ref="dialogForm" :data="formData" :rules="rules" @submit="submit">
        <t-form-item label="护理项目名称" name="name">
          <t-input v-model="formData.name" :maxlength="10" show-limit-number>
          </t-input>
        </t-form-item>
        <t-form-item label="价格" name="price">
          <t-input-number v-model="formData.price" theme="column" auto-width align="center"/>
        </t-form-item>
        <t-form-item label="单位" name="unit">
          <t-input v-model="formData.unit" :maxlength="5" show-limit-number>
          </t-input>
        </t-form-item>
        <t-form-item label="排序" name="orderNo">
          <t-input-number v-model="formData.orderNo" theme="column" auto-width align="center"/>
        </t-form-item>
        <t-form-item label="状态" name="status">
          <t-radio-group v-model="formData.status">
            <t-radio :value="1">启用</t-radio>
            <t-radio :value="0">禁用</t-radio>
          </t-radio-group>
        </t-form-item>
        <t-form-item label="护理图片" name="image">
          <t-upload
              ref="imageUploadRef"
              v-model="files"
              action="/api/common/upload"
              theme="image"
              accept="image/*"
              :auto-upload="autoUpload"
              :show-image-file-name="showImageFileName"
              :formatResponse="formatResponse"
          ></t-upload>
        </t-form-item>
        <t-form-item label="护理项目描述" name="nursingRequirement">
          <t-textarea
              v-model="formData.nursingRequirement"
              placeholder="请输入内容"
              :maxlength="50"
              show-limit-number
          />
        </t-form-item>
        <t-form-item>
          <t-space size="small">
            <t-button theme="default" variant="base" @click="dialogClose">
              取消
            </t-button>
            <t-button theme="primary" type="submit"> 提交</t-button>
          </t-space>
        </t-form-item>
      </t-form>
    </div>
  </t-dialog>
</template>

<style scoped>
.c_dialog :deep(.t-form__label) {
  padding-right: 20px;
}

.c_dialog :deep(.t-input-number .t-input__wrap) {
  width: 100px;
}
</style>
